<script setup lang="ts">
import type { MovieItem, Response } from "~/types";

const { data } = await useFetch<Response<{ list: MovieItem[]; total: number }>>(
  "/bsmovie/list",
  {
    baseURL: useRuntimeConfig().public.baseUrl,
    server: false,
    method: "post",
    body: {
      page: 1,
      size: 80,
    },
    pick: ["data"],
  }
);

const activeTypeIndex = ref(0);
const typeList = [
  "全部",
  "动作片",
  "喜剧片",
  "爱情片",
  "恐怖片",
  "剧情片",
  "战争片",
  "悬疑片",
  "惊悚片",
  "犯罪片",
  "灾难片",
  "奇幻片",
  "纪录片",
  "微电影",
  "预告片",
  "电影解说",
];

const regionIndex = ref(0);
const regionList = [
  "全部",
  "大陆",
  "香港",
  "台湾",
  "美国",
  "韩国",
  "日本",
  "泰国",
  "新加坡",
  "印度",
  "英国",
  "法国",
  "加拿大",
  "西班牙",
  "意大利",
];

const yearIndex = ref(0);
const yearList = [
  "全部",
  "2024",
  "2023",
  "2022",
  "2021",
  "2020",
  "2019",
  "2018",
  "2017",
  "2016",
  "2015",
  "2014",
  "2013",
  "2012",
  "2011",
  "2010",
];
</script>

<template>
  <div>
    <div class="transition sticky top-0 z-10 bg-body py-40px">
      <TagList
        title="类型"
        :tag-list="typeList"
        :active-index="activeTypeIndex"
        @change="(index) => (activeTypeIndex = index)"
      />
      <div h-7></div>
      <TagList
        title="地区"
        :tag-list="regionList"
        :active-index="regionIndex"
        @change="(index) => (regionIndex = index)"
      />
      <div h-7></div>
      <TagList
        title="时间"
        :tag-list="yearList"
        :active-index="yearIndex"
        @change="(index) => (yearIndex = index)"
      />
    </div>
    <div flex flex-wrap gap-3>
      <VideoCard
        v-for="item in data?.data.list"
        :key="item.id"
        :record="item"
      ></VideoCard>
    </div>
  </div>
</template>

<style scoped></style>
